#include('../../header.html', {title: '学生问题'})
<div id="content-container" class="container">
  <div class="row row-3-9 my-layout">
    <div class="col-md-3">
      #include('../sideMenu.html', {user: 'tea', name:'学生问题'})
    </div>
    <div class="col-md-9">
      <div class="panel panel-default panel-col">
        <div class="panel-heading">
          学生问题
        </div>
        <div class="panel-body" id="app">
          <ul class="media-list">
            <ask-list v-for="(ask, index) in asks"
                      :index="index" :ask="ask" :key="ask.id"></ask-list>
            <nav class="text-center" v-if="page.totalPages>1">
              <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
            </nav>
          </ul>
          <div v-if="asks.length==0" class="empty">您的课程中还没有学员提问过...</div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<template id="ask-li">
  <li class="media">
    <div class="media-body">
      <div class="mbm">
        <span class="label label-info" title="问答帖">问</span>
        <a :href="'/course/'+ask.course.id+'/join/info?wid='+ask.id"><strong>{{ask.title}}</strong></a>
      </div>
      <div class="color-gray text-normal">
        <span>
          来自<a :href="'/course/'+ask.course.id+'/join/info'" class="link-primary">{{ask.task?ask.task.name:'默认教学计划'}}</a>
          -
          <a :href="'/course/'+ask.course.id+'/join/info'" class="link-primary">
            {{ask.course.name}}
          </a>
        </span>
        <span class="bullet">•</span>
        <span>{{ask.looks}}浏览</span>
        <span class="bullet">By</span>
        <a :href="'/user/'+ask.user.id+'/home'" class="link-dark link-primary">{{ask.user.username}}</a>
      </div>
    </div>
  </li>
</template>

<div id="login-modal" class="modal" data-url="/login/ajax"></div>
<div id="modal" class="modal"></div>
<div id="attachment-modal" class="modal"></div>
<script>
  new Vue({
    el: '#app',
    data: {
      asks: [],
      page: {
        pageNum: 1,
        totalPages: 1,
        limit: 10
      }
    },
    components: {
      'ask-list': {
        props: ['asks', 'ask', 'index'],
        template: '#ask-li'
      }
    },
    created: function () {
      this.getPage();
    },
    methods: {
      gotoPage: function (page) {
        this.page.pageNum = page;
      },
      getPage: function () {
        var vm = this;
        $.post('/course/ask/api/tea/getAsk', {page: this.page.pageNum}, function (data) {
          if (data.success) {
            vm.asks = [];
            vm.asks = data.payload.rows;
            vm.page.pageNum = data.payload.pageNum;
            vm.page.totalPages = data.payload.totalPages;
          }
        })
      }
    },
    watch: {
      'page.pageNum': function (nv) {
        this.getPage();
      }
    }
  })
</script>

#include('../../footer.html')